<script setup>
  import { onMounted, ref, reactive, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import Tabbar from '@/components/TabbarCustom.vue'

  import Api from './api/index.js'
  const __Api = new Api()

  function toRule() {
    uni.navigateTo({
      url: `/homePage/blind/rule`,
    })
  }
  function toLogs() {
    uni.navigateTo({
      url: `/homePage/blind/logs`,
    })
  }
  function toDetail(item) {
    uni.navigateTo({
      url: `/homePage/blind/detail?id=${item.id}`,
    })
  }
  function goBack() {
    uni.navigateBack()
  }
  let pageData = ref({})
  const data5 = computed(() => {
    return filterData(5)
    // 金
  })
  const data4 = computed(() => {
    // 木
    return filterData(4)
  })
  const data3 = computed(() => {
    return filterData(3)
    // 水
  })
  const data2 = computed(() => {
    return filterData(2)
    // 火
  })
  const data1 = computed(() => {
    return filterData(1)
    //土
  })
  function filterData(num) {
    const dataArr = pageData.value.data || []
    if (dataArr.length > 0) {
      const arr = dataArr.filter((e) => e.grade == num)
      if (arr.length > 0) {
        return arr[0]
      } else {
        return null
      }
    } else {
      return null
    }
  }
  onShow(() => {
    // hidePart()
    __Api.getEnergyData().then((res) => {
      console.log(res, 'resresresresres')
      pageData.value = res.data
      console.log(pageData.value, 'pageData.value')
    })
    // uni.hideTabBar()
    // getUserInfo()
  })
</script>

<template>
  <view class="warp">
    <view class="war-top">
      <view class="war-back" @click="goBack">
        <view class="back-aim"> </view>
      </view>
    </view>
    <image
      class="bgImg"
      src="https://ojqn.wm2177.com/wechat_imgs/ball/bg-home.jpg"
      mode=""
    ></image>
    <view class="content">
      <!-- 规则 -->
      <image
        class="utilBox"
        style="top: 220rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/ball/rule.png"
        mode=""
        @click="toRule()"
      ></image>
      <!-- blind/rule -->
      <!-- 记录 -->
      <image
        @click="toLogs()"
        class="utilBox"
        style="top: 340rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/ball/logs.png"
        mode=""
      ></image>
      <view class="pageTitle">
        <image
          class="titleimg1"
          src="https://ojqn.wm2177.com/wechat_imgs/ball/big-title.png"
          mode=""
        ></image>
      </view>
      <view class="blindImg" style="">
        <image
          v-if="pageData && pageData.hero_goods?.img"
          :src="pageData.hero_goods.img"
          style="width: 100%; height: 100%"
          mode=""
        ></image>
        <image
          class="rule_img"
          v-if="pageData && pageData.hero_goods?.rule_img"
          :src="pageData.hero_goods.rule_img"
          mode=""
        ></image>
      </view>
      <view class="typeBox">
        <view class="type5 typeChild">
          <image
            v-if="data5"
            @click="toDetail(data5)"
            style="width: 100%; height: 100%"
            :src="data5.icon"
            mode=""
          ></image>
          <view v-if="data5" style="top: -40rpx"
            >{{ data5.name }}({{ data5.num }})</view
          >
        </view>
        <view class="type4 typeChild">
          <image
            v-if="data4"
            @click="toDetail(data4)"
            style="width: 100%; height: 100%"
            :src="data4.icon"
            mode=""
          ></image>
          <view v-if="data4" style="top: -40rpx"
            >{{ data4.name }}({{ data4.num }})</view
          >
        </view>
        <view class="type3 typeChild">
          <image
            v-if="data3"
            @click="toDetail(data3)"
            style="width: 100%; height: 100%"
            :src="data3.icon"
            mode=""
          ></image>
          <view v-if="data3" style="top: -40rpx"
            >{{ data3.name }}({{ data3.num }})</view
          ></view
        >
        <view class="type2 typeChild">
          <image
            v-if="data2"
            @click="toDetail(data2)"
            style="width: 100%; height: 100%"
            :src="data2.icon"
            mode=""
          ></image>
          <view v-if="data2" style="top: -40rpx"
            >{{ data2.name }}({{ data2.num }})</view
          ></view
        >
        <view class="type1 typeChild">
          <image
            v-if="data1"
            @click="toDetail(data1)"
            style="width: 100%; height: 100%"
            :src="data1.icon"
            mode=""
          ></image>
          <view v-if="data1" style="top: -40rpx"
            >{{ data1.name }}({{ data1.num }})</view
          ></view
        >
      </view>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .rule_img {
    position: absolute;
    top: -24rpx;
    left: -24rpx;
    width: 170rpx;
    height: 177rpx;
  }
  .war-top {
    padding-left: 18rpx;
    position: fixed;
    z-index: 99999;
    top: 88rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .war-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 57rpx;
      height: 57rpx;
      background-color: rgba(7, 1, 53, 0.5);
      border-radius: 50%;

      .back-aim {
        width: 20rpx;
        height: 20rpx;
        border-top: 4rpx solid #fff;
        border-left: 4rpx solid #fff;
        transform: rotate(-45deg);
      }
    }
  }
  .warp {
    width: 100%;
    height: 100vh;
    .bgImg {
      width: 100%;
      height: 100%;
    }
    .content {
      .utilBox {
        position: absolute;
        right: 27rpx;
        width: 75rpx;
        height: 75rpx;
      }
      padding-top: 190rpx;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      top: 0;
      left: 0;
      z-index: 10000;
      box-sizing: border-box;
    }
    .pageTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .titleimg1 {
        width: 395rpx;
        height: 157rpx;
      }
    }
    .blindImg {
      position: relative;
      width: 430rpx;
      height: 430rpx;
      margin: 0 auto;
      margin-top: 48rpx;
      // background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      border: 2px solid #fff5d8;
      background-color: rgba(255, 255, 255, 0.095); /* 半透明背景 */
      backdrop-filter: blur(10rpx); /* 背景模糊 */
      -webkit-backdrop-filter: blur(10rpx); /* 兼容老版本 Safari */
    }
    .typeBox {
      margin-left: 60rpx;
      width: 630rpx;
      margin-top: 84rpx;
      position: relative;
      .typeChild {
        position: absolute;
        width: 128rpx;
        height: 128rpx;
        color: #c2c0aa;
        view {
          width: 168rpx;
          text-align: center;
          position: absolute;
          left: -20rpx;
          font-size: 28rpx;
        }
      }
      .type1 {
        // 土
        top: 490rpx;
        right: 50rpx;
      }
      .type2 {
        // 火
        left: 50rpx;
        top: 490rpx;
      }
      .type3 {
        // 水
        top: 174rpx;
        right: 0;
      }
      .type4 {
        // 木
        top: 174rpx;
        left: 0;
      }
      .type5 {
        // 金
        left: 50%;
        right: 50%;
        margin-left: -64rpx;
      }
    }
  }
</style>
